<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="#{findPassword.title}">Password Recovery</title>
    <link th:href="@{/assets/css/bootstrap.css}" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .container { width: 400px; margin: 100px auto; }
        .form-group { margin-bottom: 20px; }
        .error-message { color: #dc3545; font-size: 14px; margin-top: 5px; display: none; }
        .success-message { color: #28a745; font-size: 14px; margin-top: 5px; display: none; }
        .code-container { display: flex; gap: 10px; }
        #passwordSection { display: none; }
    </style>
</head>
<body>
<div class="container">
    <h3 th:text="#{findPassword.title}">Password Recovery</h3>

    <!-- 状态消息显示区域 -->
    <div th:if="${error != null}" class="error-message" th:text="${error}" style="display:block;"></div>
    <!-- 修复后（使用国际化键） -->
    <div id="resetSuccess" class="success-message" th:text="#{findPassword.reset.success}"></div>

    <form id="findPasswordForm">
        <!-- 邮箱输入 -->
        <div class="form-group">
            <label for="email" th:text="#{findPassword.email}">Email</label>
            <input type="email" class="form-control" id="email" required
                   placeholder="#{findPassword.email.placeholder}">
            <div class="error-message" id="emailError" th:text="#{findPassword.email.error}"></div>
        </div>

        <!-- 验证码输入 -->
        <div class="form-group">
            <label for="code" th:text="#{findPassword.code}">Verification Code</label>
            <div class="code-container">
                <input type="text" class="form-control" id="code" required maxlength="6"
                       placeholder="#{findPassword.code.placeholder}">
                <button type="button" class="btn btn-secondary" id="sendCodeBtn"
                        th:text="#{findPassword.sendCode}"></button>
            </div>
            <div class="error-message" id="codeError" th:text="#{findPassword.code.error}"></div>
        </div>

        <!-- 下一步按钮 -->
        <div class="form-group">
            <button type="button" class="btn btn-primary" id="nextBtn"
                    th:text="#{findPassword.next}"></button>
        </div>

        <!-- 密码重置区域 -->
        <div id="passwordSection">
            <div class="form-group">
                <label for="newPassword" th:text="#{findPassword.newPassword}">New Password</label>
                <input type="password" class="form-control" id="newPassword" required
                       placeholder="#{findPassword.newPassword.placeholder}">
                <div class="error-message" id="passwordError" th:text="#{findPassword.password.error}"></div>
            </div>
            <div class="form-group">
                <label for="confirmPassword" th:text="#{findPassword.confirmPassword}">Confirm Password</label>
                <input type="password" class="form-control" id="confirmPassword" required
                       placeholder="#{findPassword.confirmPassword.placeholder}">
                <div class="error-message" id="confirmError" th:text="#{findPassword.confirm.error}"></div>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success" id="resetBtn"
                        th:text="#{findPassword.reset}"></button>
            </div>
        </div>

        <!-- 返回登录链接（已修复路径问题） -->
        <div class="form-group">
            <a th:href="@{/login/login}" th:text="#{findPassword.login.link}"></a>
        </div>
    </form>
</div>

<script>
    $(document).ready(function() {
        const sendCodeOriginalText = $('#sendCodeBtn').text();

        // 发送验证码
        $('#sendCodeBtn').click(function() {
            const email = $('#email').val();
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                $('#emailError').show();
                return;
            }
            $(this).prop('disabled', true).text('Sending...');
            $.get('[[@{/findPassword/sendCode}]]', {email: email}, function(res) {
                alert(res.message);
                if (res.success) {
                    let countdown = 60;
                    const timer = setInterval(() => {
                        $('#sendCodeBtn').text(`Resend(${countdown--})`);
                    if (countdown < 0) {
                        clearInterval(timer);
                        $('#sendCodeBtn').prop('disabled', false).text(sendCodeOriginalText);
                    }
                }, 1000);
                } else {
                    $('#sendCodeBtn').prop('disabled', false).text(sendCodeOriginalText);
                }
            });
        });

        // 验证验证码并显示密码重置区域
        $('#nextBtn').click(function() {
            const email = $('#email').val();
            const code = $('#code').val();
            if (code.length !== 6) {
                $('#codeError').show();
                return;
            }
            $.post('[[@{/findPassword/verifyCode}]]', {email, code}, function(res) {
                if (res.success) {
                    $('#passwordSection').show();
                }
                alert(res.message);
            });
        });

        // 重置密码 - 成功后显示消息，不跳转
        $('#resetBtn').click(function() {
            const pwd = $('#newPassword').val();
            const confirmPwd = $('#confirmPassword').val();

            // 前端验证
            if (pwd.length < 6) {
                $('#passwordError').show();
                return;
            }
            if (pwd !== confirmPwd) {
                $('#confirmError').hide().show();
                return;
            }

            // 提交重置请求
            $.post('[[@{/findPassword/reset}]]', {
                email: $('#email').val(),
                newPassword: pwd
            }, function(res) {
                // 隐藏所有错误消息
                $('.error-message').hide();

                if (res.success) {
                    // 显示成功消息，保持在当前页面
                    $('#resetSuccess').show();
                    // 重置密码表单
                    $('#newPassword').val('');
                    $('#confirmPassword').val('');
                } else {
                    // 显示错误消息
                    alert(res.message);
                }
            });
        });

        // 输入框实时验证
        $('#email').on('input', () => $('#emailError').hide());
        $('#code').on('input', () => $('#codeError').hide());
        $('#newPassword').on('input', () => {
            $('#passwordError').hide();
        $('#confirmError').hide();
    });
        $('#confirmPassword').on('input', () => $('#confirmError').hide());
    });
</script>
</body>
</html>
